<script setup>
import { ref, reactive, watch } from 'vue';

const count = ref(0);
// reactive 能直接感知到深层数据的变化，比如 user.info.age 的变化，从而响应
const user = reactive({ name: 'zs', info: { gender: '男', age: 18 } });

// 当 watch 多个数据时，newValue 也是按监听顺序来的
watch([count, user], newValue => {
  const [count, user] = newValue;
  console.log(count, user, '变了');
});

// 在 Vue2 中如何实现上面的 用一个侦听器 侦听多个数据的变化呢？
//  可以先用计算属性 将想要监听的多个数据 组合成一个对象或数组，然后再用 watch 侦听这个计算属性

setTimeout(() => {
  user.info.age++;
}, 2000);
</script>

<template></template>
